@use "theme";
@use "../colors/gruvbox-soft" as *;

.light-mode {
  @import "../../../../static/res/libs/highlightjs/styles/base16/gruvbox-light-soft.min";
  @include theme.themable((
    body-fg:          $light-color-base05,
    body-bg:          $light-color-b01-white-mix30,
    selection-fg:     currentColor,
    selection-bg:     $light-color-base02,
    blockquote-fg:    currentColor,
    blockquote-bg:    $light-color-b00-alpha30,
    dd-fg:            $light-color-base05,
    dd-bg:            $light-color-base00,
    code-inline-fg:   $light-color-base05,
    code-inline-bg:   $light-color-base00,
    code-block-fg:    $light-color-base05,
    code-block-bg:    $light-color-base00,
    math-inline-fg:   $light-color-base0A,
    math-inline-bg:   transparent,
    math-block-fg:    $light-color-base0A,
    math-block-bg:    $light-color-base00,
    table-fg:         $light-color-base05,
    table-bg:         $light-color-base00,
    table-header-fg:  $light-color-base05,
    table-header-bg:  $light-color-base01,
    heading:          $light-color-base06,
    link:             $light-color-base0F,
    sep:              $light-color-base03,
    dt:               $light-color-base0A,
  ));

  .mdb {
    /* Border box */
    pre[class*=language-],
    mjx-container[jax=SVG][display=true],
    .table-container,
    blockquote,
    dd {
      box-shadow: -2px 0px 10px 0px $light-color-b05-white-mix50;
    }

    blockquote {
      border-left-color: $light-color-base0F;
      border-left-width: 0.2rem;
      border-left-style: solid;
    }

    dd {
      border-color: $light-color-base03;
    }

    /* Language specified */
    .hljs.language-agda .hljs-operator {
      color: $light-color-base0B;
    }

  }

}

.dark-mode {
  @import "../../../../static/res/libs/highlightjs/styles/base16/gruvbox-dark-soft.min";
  @include theme.themable((
    body-fg:          $dark-color-base05,
    body-bg:          $dark-color-base01,
    selection-fg:     currentColor,
    selection-bg:     $dark-color-base02,
    blockquote-fg:    currentColor,
    blockquote-bg:    $dark-color-b00-alpha60,
    dd-fg:            $dark-color-base05,
    dd-bg:            $dark-color-base00,
    code-inline-fg:   $dark-color-base05,
    code-inline-bg:   $dark-color-base00,
    code-block-fg:    $dark-color-base05,
    code-block-bg:    $dark-color-base00,
    math-inline-fg:   $dark-color-base0A,
    math-inline-bg:   transparent,
    math-block-fg:    $dark-color-base0A,
    math-block-bg:    $dark-color-base00,
    table-fg:         $dark-color-base05,
    table-bg:         $dark-color-base00,
    table-header-fg:  $dark-color-base05,
    table-header-bg:  $dark-color-base02,
    heading:          $dark-color-base06,
    link:             $dark-color-base09,
    sep:              $dark-color-base03,
    dt:               $dark-color-base0A,
  ));

  .mdb {
    /* Border */
    pre[class*=language-],
    mjx-container[jax=SVG][display=true],
    .table-container,
    blockquote {
      border: solid $dark-color-base03 1px;
    }

    blockquote {
      border-left-color: $dark-color-base09;
      border-left-width: 0.2rem;
      border-left-style: solid;
    }

    dd {
      border-color: $dark-color-base03;
    }

    /* Language specified */
    .hljs.language-agda .hljs-operator {
      color: $dark-color-base0B;
    }

  }

}

.mdb {
  dt {
    &:before {
      font-size: 1.5rem;
      content: "\273b";
      padding-right: 0.5rem;
    }
  }
  dd {
    border-width: 0.2rem;
    border-style: dashed;
  }
}

@import "base";
